<template>
  <div class="option">
    <div class="rollback" @click="goBack" v-if="props.flag">
      <!-- <t-icon name="rollback"></t-icon>
      <span class="text">返回</span> -->
      <img src="//static.jiyi.show/template/template1/icon/returnIcon.png" alt="" />
    </div>
    <div class="Comparison"><Comparison /></div>
    <div class="iconFont iconFont1"><strat /></div>
    <t-popup content="" placement="left">
      <template #content>
        <shear @shearType="shearType" />
      </template>
      <div class="add-btn1 iconFont">
        <t-icon name="share"></t-icon>
      </div>
    </t-popup>
    <div class="iconFont iconFont2" @click="Top"><t-icon name="backtop" /></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineProps, ref, watch } from 'vue';
import shear from '@/components/shear/shear.vue';

// import strat from '@/components/start/start.vue';
import strat from './start.vue';
import router from '@/router';
// export default defineComponent({
//   name: 'Nav',
// });
</script>
<script lang="ts" setup>
import Comparison from '@/components/comparison/comparison.vue';
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
const props = defineProps({
  flag: {
    type: Boolean,
    default: false,
  },
  name: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['top']);
const Top = () => {
  emit('top');
};
const goBack = () => {
  router.go(-1);
};
const shearType = (e: number) => {
  //分享
  let url = window.location.href;
  let title = '';
  switch (e) {
    case 1:
      toQQzone(url, title);
      break;
    case 2:
      toQQ(url, title);
      break;
    case 3:
      toWeibo(url, title);
      break;
    default:
      toWechat(url, title);
      break;
  }
};
</script>

<style lang="less" scoped>
.option {
  position: fixed;
  right: 30px;
  bottom: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 2500;
}
.rollback :hover {
  opacity: 0.7;
}
.Comparison .swap-box-icon :hover .swap-box-icon {
  opacity: 0.7 !important;
}
.iconFont1:hover {
  opacity: 0.7 !important;
}
.iconFont2:hover {
  opacity: 0.7 !important;
}
.add-btn1:hover {
  opacity: 0.7 !important;
}
.iconFont {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  margin-bottom: 28px;
  // opacity: 0.7;
  cursor: pointer;
  // position: relative;
  :deep(.t-icon) {
    font-size: 30px;
    line-height: 30px;
  }
}
.iconFont1 {
  // opacity: 0.7;
}
.a {
  line-height: 50px;
}

.Comparison {
  margin-bottom: 28px;
  :deep(.comparison-box) {
    width: 50px;
    height: 50px;
    position: relative !important;
    bottom: 0px;
    right: 0px;
  }
  :deep(.comparison-box:hover) {
    opacity: 0.7;
    .item-box {
      // background: rgba(255, 255, 255, 0.5);
    }
  }
  :deep(.item-box) {
    width: 50px;
    height: 50px;
    // transform: rotate(90deg);
    background: rgba(0, 0, 0, 0.2);
  }
}
.rollback {
  width: 56px;
  height: 56px;
  display: flex;
  cursor: pointer;
  margin-bottom: 28px;
  > img {
    width: 100%;
    height: 100%;
  }
}
</style>
